<template>
	<view class="roc-upload-image">
		<roc-upload
			:action="item.props.action || `${baseURL}apim.php?_=DataAccess::upload`"
			:header="header"
			:disabled="item.props.disabled || false"
			:file-list="fileList"
			:show-progress="false"
			:max-count="item.props.limit || 9"
			@on-uploaded="successUpload"
			@on-error="errorUpload"
			@on-remove="remove"
			width="150"
			height="150"
		></roc-upload>
	</view>
</template>

<script>
import Emitter from '@/uni_modules/uview-ui/libs/util/emitter.js';
import RocUpload from '../roc-upload/roc-upload.vue';
import { baseUrl } from '@/api/config';
export default {
	name: 'roc-upload-image',
	mixins: [Emitter],
	components: {
		RocUpload
	},
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			header: {
				guid: uni.getStorageSync('guid')
			},
			formdata: {},
			baseURL: baseUrl,
			fileList: []
		};
	},
	mounted() {
		setTimeout(() => {
			this.fileList = this.value.map(url => ({ url }));
		}, 100)
	},
	methods: {
		successUpload(lists) {
			this.changes(lists);
		},
		remove(index, lists, name) {
			this.changes(lists);
		},
		changes(lists) {
			let urls = [];
			lists.map(item => {
				//编辑时，已存在的图片没有response
				if (!item.response) {
					urls.push(item.url);
				} else if (item.response.code) {
					urls.push(item.response.data);
				}
			});
			// urls: ['/img_test/1651216317_app-icon.png']
			this.$emit('input', urls);
		},
		errorUpload(e) {
			this.$u.toast('上传失败了！');
		}
	}
};
</script>

<style lang="scss">
.roc-upload-image {
	width: 100%;
}
</style>
